*{margin:0;box-sizing:border-box;font-family:Inconsolata,ui-monospace,SFMono-Regular,Menlo,monospace}html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none;background:#f3f3f4;color:#111}body,#background{position:fixed;inset:0;background:#f3f3f4}#background{overflow:hidden;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}canvas{position:absolute;z-index:1;margin:0;box-shadow:0 0 3px 3px #0002;background:#f0e4e3;image-rendering:crisp-edges;image-rendering:pixelated;touch-action:none;user-select:none}#sand-canvas{z-index:2}#fluid-canvas{z-index:1;opacity:.24;pointer-events:none}#ui{position:absolute;z-index:3;display:flex;flex-wrap:wrap;gap:2px;padding:1px;-webkit-overflow-scrolling:touch;touch-action:pan-y}button{z-index:3;position:relative;min-height:29px;min-width:32px;font-size:clamp(15px,4.4vw,18px);padding:1px 5px;background:whitesmoke;color:#000;border:2px solid gainsboro;fill:#000;line-height:1;cursor:pointer;touch-action:manipulation}button.selected{background:#000;color:whitesmoke;border-color:grey;fill:whitesmoke;text-shadow:1.6px 1.5px 0 grey,-1px -1px 0 grey,1px -1px 0 grey,-1px 1px 0 grey,1px 1px 0 grey}.sizes,.elements{display:flex;flex-wrap:wrap;gap:2px}.sizes button{padding:0;width:31px}.elements button{flex:1 1 40px;max-width:150px}#fps{pointer-events:none;z-index:3;position:absolute;right:calc(env(safe-area-inset-right) + 3px);bottom:calc(env(safe-area-inset-bottom) + 3px);padding:2px 4px;background:#ffffff73;text-align:right;white-space:pre;user-select:none;font-size:12px}.menu{position:absolute;left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));top:max(10px,env(safe-area-inset-top));z-index:5;background:#f3f3f4;border:1px solid gray;box-shadow:0 0 3px 3px #0003;padding:10px;max-width:900px;max-height:calc(100vh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto;margin:auto;touch-action:pan-y}.menu p{margin:.75em 0;line-height:1.35}.x{position:absolute;right:4px;top:5px}.element-empty{background:#f3f3f4}.element-wall{background:#4c4c4c;color:white}.element-sand{background:#d4b15f}.element-water{background:#6f94d8}.element-stone{background:#929292}.element-ice{background:#bcecf5}.element-gas{background:#ddd}.element-cloner{background:#c1b0df}.element-mite{background:#7d3f2a;color:white}.element-wood{background:#7b5132;color:white}.element-plant{background:#68a955}.element-fungus{background:#9d7ab8}.element-seed{background:#9b6b34;color:white}.element-fire{background:#f16a2d}.element-lava{background:#e04b22;color:white}.element-acid{background:#83df52}.element-dust{background:linear-gradient(45deg,#ca797d,#a978c8,#7576c3,#75c4c1,#7acba8,#b9c375,#ccba7a)}.element-oil{background:#363025;color:white}.element-rocket{background:#d7d7d7}@media (max-width:520px){#ui{gap:1px;padding:1px}button{min-height:28px;min-width:30px;padding:1px 4px;font-size:clamp(14px,4vw,16px)}.elements button{flex-basis:36px;min-width:36px}.sizes button{width:29px}.sizes svg{width:20px;height:20px}}@media (orientation:landscape) and (min-width:700px){#ui{align-content:flex-start}.elements button{flex-basis:60px}}